<template>
    <view class="my-content page">
        <view class="top">
            <view class="photo">
                <view class="avatar">
                    <u-avatar v-if="loading" :src="IMAGE_URL + avatar"></u-avatar>
                    <text>{{ info[$t('item.user.username')] }}</text>
                </view>
            </view>
        </view>
        <view class="list">
            <ol>
                <li v-for="(item, index) in list.product_image" :key="index">
                    <video v-if="item.substr(-3, 3) == 'mp4'" v-show="show" autoplay loop :initial-time="0"
                        :id="'myVideo' + index" @play="playVedio(index)" @fullscreenchange="fullscreenchange"
                        :enable-play-gesture="true" @error="videoErrorCallback" object-fit="fill" :src="IMAGE_URL + item"
                        :poster="(IMAGE_URL + item) + '?x-oss-process=video/snapshot,t_1000,f_jpg,w_640,h_360'">
                    </video>
                    <u-image @click="preview(item)" v-else width="200rpx" height="200rpx" :src="IMAGE_URL + item"></u-image>
                    <view v-show="!show" @click="Play(index)"
                        style="width: 100%;height: 100%;position: relative;display: flex;justify-content: center;align-items: center;"
                        v-if="item.substr(-3, 3) == 'mp4'">
                        <u-image width="100rpx" height="100rpx" style="position: absolute;z-index: 20;"
                            src="/static/images/user/bof.png"></u-image>
                        <u-image width="225rpx" height="250rpx"
                            :src="IMAGE_URL + item + '?x-oss-process=video/snapshot,t_1000,f_jpg,w_640,h_360'"></u-image>
                    </view>
                </li>
                <view style="opacity: 0;width: 30%;"></view>
                <view style="opacity: 0;width: 30%;"></view>
            </ol>
        </view>
        <!-- 图片预览 -->
        <u-mask :show="mask" @click="mask = false">
            <view>
                <u-image width="100%" height="100vh" mode="aspectFit" :src="IMAGE_URL + url"></u-image>
            </view>
        </u-mask>
    </view>
</template>

<script>
import { IMAGE_URL } from '../../../config/app'
export default {
    data() {
        return {
            IMAGE_URL,
            list: [],
            info: {},
            id: 0,
            show: false,
            videoContext: null, //视频实例,
            mask: false,
            url: '',
            avatar:'',
            loading:false,
        }
    },
    onLoad(option) {
        this.id = option.id
        this.$u.api.user.getUserHomepage({ user_id: this.id, type: 1 }).then(res => {
            // console.log(res)
            this.avatar = res.userInfo.avatar
            this.info = res.userInfo
            this.list = res.userInfo
            this.loading = true
            // console.log(this.info);
        })
        //#ifdef APP-PLUS
        plus.screen.lockOrientation('portrait-primary');
        //#endif
    },
    onReady() {
    },
    methods: {
        // 点击图片预览
        preview(e) {
            if (e == '') return
            // console.log(this.url);
            this.mask = true
            this.url = e
        },
        videoErrorCallback(e) {
            console.log('视频错误信息:')
            console.log(e.target.errMsg)
        },
        Play(index) {
            this.show = true
            this.videoContext = uni.createVideoContext(`myVideo${index}`);
            this.videoContext.play()
            this.videoContext.requestFullScreen();
        },
        playVedio(index) {

        },
        fullscreenchange(e) {
            // console.log(e);
            if (!e.detail.fullScreen) {
                this.videoContext.pause()
                this.videoContext.seek(0)
                this.show = false
            }
        }

    },
}
</script>

<style lang="scss" scoped>
.page {
    background-color: #f1f1f1;
    display: flex;
    flex-direction: column;

    .list {
        flex: 1;
        overflow: scroll;
    }

    ol {
        padding: 20rpx;
        list-style-type: none;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;

        li {
            width: 30%;
            height: 250rpx;
            background-color: white;
            margin-top: 20rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
    }
}

.top {
   height: 130rpx;
    margin-top: 20rpx;
    padding: 20rpx 20rpx 20rpx 20rpx;
    display: flex;
    flex-direction: column;
    background: linear-gradient(138deg, rgba(224, 53, 18, 1), rgba(249, 163, 43, 1));
    color: #ffffff;

    .photo {
        width: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;

        .avatar {
            display: flex;
            align-items: center;

            text {
                margin-left: 20rpx;
                flex: 1;
                overflow: hidden;
                word-break: break-all;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
        }

        .ico {
            padding-top: 10rpx;
            box-sizing: border-box;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
    }
}
</style>